<template>
	<view class="frame">
		<view class="login" v-if="wxlofin">
			<view class="avatarUrl"><image :src="avatarUrl"></image></view>
			<view class="info">
				<text>昵称:{{name}}</text>
				<text>性别:{{sex == '1' ? '男' : '女'}}</text>
			</view>
		</view>
		
		<view class="login" @click="showLogin()" v-if="!wxlofin">
			<view class="avatarUrl">
				
				<image src="../../static/inster/touxiang.png"></image>
				
			</view>
			<view class="info">
				<text>点击登录</text>
				<text>登录查看更多内容</text>
			</view>
		</view>

		<view class="my">
			<view class="my-v">
				
				<text class="my-title letter">我的关注</text>
				<view class="fav">
					<block v-for="(item,index) in titleArr" :key="index">
						<view class="prefer-con" @click="showScreen(item.type)">
							<image :src="item.img" class="prefer-img" mode=""></image>
							<text>{{item.title}}</text>
						</view>
					</block>
				</view>
				
				<view class="hot">
					<text>客服热线</text>
					<image src="../../static/inster/dayu.png" mode="" @click="call()"></image>
				</view>
				
				<view class="hot" @click="showAboutView()">
					<text>关于我们</text>
					<image src="../../static/inster/dayu.png" mode="" >
				</view>
				
				<view class="logout" v-if="wxlofin" @click="logout()">
					<button plain="true" class="butt">
						<text>退出登录</text></button>
				</view>
			</view>
		</view>
		<!-- 及时反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
	</view>
</template>

<script>
// 引入公用存储用户登录
import { login } from '../../common/list.js';
// 引入即可反馈组件
import HMmessages from '../../components/HM-messages/HM-messages.vue';
import { phone } from '../../api/request.js';
var { log } = console;			// 解构

var db = wx.cloud.database()
var users = db.collection('user')
export default {
	components: { HMmessages },
	data() {
		return {
			wxlofin: false,
			avatarUrl:'',
			name:'',
			sex:'',
			id:'',
			openid:'',
			// 轮播数组
			titleArr: [
					{
						img: require('../../static/inster/ershoufang.png'),
						title: '二手房',
						type:'1'	// 二手房
					},
					{
						img: require('../../static/inster/xiaoqu.png'),
						title: '小区',
						type:'3'	// 小区
					},
					{
						img: require('../../static/inster/zhuFang.png'),
						title: '租房',
						type:'0'	// 租房
					}
			],
		};
	},
	methods: {
		
		// 按钮：电话咨询
		call() {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		
		// 按钮：关于我们
		showAboutView(){
			wx.navigateTo({
				url: 'about'
			});
		},
		
		showScreen(type){
			let obj = {
				type,openid:this.openid
			};
			let objStr = JSON.stringify(obj);
			if(type == '1'){
				wx.navigateTo({
					url: '../index/screen/sechouceScreen?obj=' + objStr
				});
			}
			if(type == '3'){
				wx.navigateTo({
					url: '../index/screen/houceScreen?obj=' + objStr
				});
			}
			if(type == '0'){
				wx.navigateTo({
					url: '../index/screen/renthouceScreen?obj=' + objStr
				});
			}
			
		},
		
		
		showLogin(){
			wx.navigateTo({
				url: 'login/login'
			});
		},
		// 请求数据库看看用户有没有登录
		ifUser(){
			users.get()
			.then((res)=>{
				console.log(res)
				if(res.data.length === 0){
					// 没有登陆过
					this.wxlofin = false
				}else{
					this.wxlofin = true
					this.username = res.data
					log('登录获取的值:'+res.data[0])
					
					this.avatarUrl = res.data[0].avatarUrl
					this.name = res.data[0].nickName
					this.sex = res.data[0].gender
					this.id = res.data[0]._id
					this.openid = res.data[0]._openid
					this.$store.commit('openidmuta',this.openid)
					
				}
			})
			.catch((err)=>{
				console.log(err)
			})
		},
		logout(){
			users.doc(this.id).remove()
			.then((res)=>{
				log("退出登录成功")
				
				this.HMmessages.show('登出成功', { icon: 'success', iconColor: '#ffffff', fontColor: '#ffffff', background: 'rgba(240, 142, 35, 0.8)' });
				this.wxlofin = !this.wxlofin
				log(this.wxlofin)
			})
			.catch((err)=>{
				console.log(err)
			})
		}
		
	},
	// 判断用户是否登录
	onShow() {
		// 请求数据库看看用户有没有登录
		this.ifUser()
	}
};
</script>

<style scoped>
	.frame{
		display: flex;
		flex-direction: column;
		background-color: #5978bb;
	}
	.login{
		margin: 30upx 40upx 0 ;
		display: flex;
		align-items: center;
		background-color: #5978bb;
	}
	.info{
		display: flex;
		flex-direction: column;
	}
	.info text:first-child{
		
		font-size: 35upx;
		color: #FFFFFF;
	}
	.info text:last-child{
		margin-top: 10upx;
	
		font-size: 25upx;
		color: #b1c6f1;
	}
	.my{
		border-radius: 50upx 50upx 0 0;
		margin-top: 50upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.my-v{
		display: flex;
		flex-direction: column;
		margin: 0 30upx;
	}
	.my-title{
		font-size: 35upx;
		margin: 46upx 0;
		font-weight: bold;
	}
	.fav{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 50upx;
		border-bottom: 1px solid #e6e6e6;
	}
	.prefer-con{
		height: 160upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.prefer-con text{
		height: 65upx;
		line-height: 65upx;
		font-size: 25upx;
	}
	.prefer-img{
		height: 100upx;
		width: 100upx;
	}
	.hot{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e6e6e6;
	}
	.hot text{
		padding: 30upx 0;
		font-size: 30upx;
		letter-spacing: 3upx;
	}
	.hot image{
		width: 40upx;
		height: 40upx;
	}
	.letter{
		letter-spacing: 3upx;
	}
	
	.avatarUrl image {
	width: 120upx !important;
	height: 120upx !important;
	border-radius: 50%;
	margin-right: 20upx;
	border: 2upx solid #b1c6f1;
	background-color: #FFFFFF;
	}
	.logout{
		margin-top: 30upx;
		font-size: 30upx;
		letter-spacing: 3upx;
		width: 100%;
		display: flex;
		  flex-direction: row;
		  justify-content: center;
		  align-items: center;
	}
	
	.butt{
		width: 99%;
		background-color: #f08e23;
		border: none;
		border-radius: 40upx;
	}
	.butt text{
		font-size: 34upx;
		letter-spacing: 3upx;
		color: #FFFFFF;
	}
</style>
